<template>
  <!-- 详情页面 -->
  <div>
    <div>
      <div>
        <van-sticky :offset-top="50">
          <div class="topms">
            <!-- v-if="tobs" -->
            <div class="mos">
              <div class="sousuo">
                <search></search>
              </div>
            </div>
          </div>
        </van-sticky>
      </div>
      <div class="details">
        <!-- 轮播 -->
        <div class="lubo">
          <!-- 通过自定义事件来拿到下标 -->
          <lobo :luobo="img" @slideshowIndex="ineIndex"></lobo>
        </div>

        <!-- 提示标签项 -->
        <div class="label" v-if="info[0]">
          <ul class="biaotilan">
            <li>
              <span v-show="info[0].isHot">热卖</span>
              <span v-show="info[0].isNew">上新</span>
            </li>

            <li>
              <span>{{ indicator.index }}/{{ indicator.length }}</span>
            </li>
          </ul>
        </div>
        <!-- 字体标签部分 -->
        <div class="tltlieto">
          <div class="tltles">
            <tltle :tltletext="info"></tltle>
          </div>
        </div>
        <!--商品规格 选择格式等 -->
        <div class="specification tltles">
          <specification></specification>
        </div>

        <!-- 位置 -->

        <!-- 评论区呀 -->
        <div class="eavluate tltles">
          <evaluate :comment="comment"></evaluate>
        </div>

        <!--购买按钮 -->
        <div class="gamia">
          <GoodsAction></GoodsAction>
        </div>

        <!-- 店铺推荐等 -->
        <div>
          <store :storeText="storeText"></store>
        </div>
        <div class="xianguan">
          <Lazyloading :waterData="waterInfo"></Lazyloading>
        </div>

        <div class="xiangqing" v-html="shangpImg"></div>

        <!-- 选择规格 -->
        <div>
          <!-- 商品规格复选框 -->
          <guger :specification="specification"></guger>
        </div>

        <div></div>
      </div>
    </div>
    <!-- 头部 -->
  </div>
</template>

<script>
import Lazyloading from "../components/Lazyloading.vue";
import API from "../http/API.js";
import { Sku } from "vant";
import evaluate from "../components/particulars/evaluate.vue";
import GoodsAction from "../components/particulars/GoodsAction.vue";
import specification from "../components/particulars/specification.vue";
import lobo from "../components/Slideshow.vue";
import { Tab, Tabs } from "vant";
import search from "@/components/Search.vue";
import tltle from "../components/particulars/tltle.vue";
import store from "../components/particulars/store.vue";
import { Sticky } from "vant";
import { ContactCard } from "vant";
import guger from "../components/particulars/guger.vue";
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Sticky.name]: Sticky,
    [Sku.name]: Sku,
    [ContactCard.name]: ContactCard,
    lobo,
    search,
    tltle,
    GoodsAction,
    specification,
    evaluate,
    store,
    guger,
    Lazyloading,
  },
  inject: ["reload"],
  data() {
    return {
      img: [],
      datas: [],
      // 自定义指示器的数组
      indicator: {
        index: 1,
        length: "",
        // 保存的信息等价格情况
      },
      shangpImg: "",
      info: [],
      comment: [],
      //店铺信息等
      storeText: [],
      waterInfo: [],
      // 商品列表兰
      specification: [],

      // 重新渲染
    };
  },
  watch: {
    $route(to, from) {
      this.https();
    },
  },

  // 引入方法
  created() {
    this.https();
    this.reload();
  },
  activated() {
    this.https();
    this.reload();
  },
  methods: {
    https(e) {
      this.$get(API.GET_COMMODITY_DETALI, {
        id: this.$route.query.userId,
      }).then((res) => {
        // this.img = res.data.info.gallery
        console.log(res);
        this.waterInfo = res.data.relatedGoods;
        this.comment = res.data.comment;
        this.info.push(res.data.info);
        this.info.push(res.data.brand);
        this.imgurl(res.data.info.gallery);
        this.shangpImg = res.data.info.detail;
        this.storeText = res.data.brand;
        this.specification = res.data.productList;
        // this.specification.push({
        //   show: false,
        // });
        this.tobs = true;
        // console.log(this.specification);
      });
    },

    // 处理图片信息
    imgurl(e) {
      for (let index = 0; index < e.length; index++) {
        this.img.push({ url: e[index], showIndicators: false });
      }
      this.indicator.length = this.img.length;
    },
    // 拿到轮播图当前所在的位置
    ineIndex(e) {
      // console.log(e);
      this.indicator.index = e + 1;
    },
    backtrack() {
      this.$router.push(localStorage.getItem("search"));
    },
    onAdd() {
      Toast("新增");
    },
  },
};
</script>

<style lang="less">
.xianguan {
  margin-left: 5px;
  margin-right: 5px;
}
.mos {
  background-color: rgb(255, 255, 255);
}
.sousuo {
  .sj();
}
.gamia {
  position: relative;
  z-index: 50;
}
.mor {
  height: 20px;
  // width: 100%;
  // border: 1px solid #000;
  display: flex;
  justify-content: space-between;
  .monts();
  .detailsimg {
    width: 20px;
    border-radius: 50%;
    // background-color: rgba(240, 248, 255, 0.616);
    // border: 1px solid #000;
    div,
    img {
      width: 100%;
      height: 100%;
    }
  }
  .mings {
    width: 50px;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    div {
      height: 20px;
      width: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    // border: 1px solid #000;
  }
}
.topms {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.315);
}
.details {
  padding-bottom: 50px;
  padding-top: 50px;
  .xiangqing {
    width: 100%;
    p {
      /deep/p {
        width: 100%;
      }
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
  .label {
    // background: repeating-linear-gradient(to bottom, #ffffff, #eeeeee);
    padding-top: 5px;
    height: 20px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    .biaotilan {
      margin-right: 10px;

      margin-left: 10px;
      display: flex;
      align-items: center;

      li {
        height: 20px;

        //  border: 1px solid #000;
        color: rgb(34, 34, 34);

        text-align: center;
        line-height: 20px;
        margin-right: 10px;

        span {
          display: block;
          width: 50px;
          border-radius: 5px;
          background-color: rgb(235, 235, 235);
          // border: 1px solid #000;
        }
        &:nth-child(1) {
          // width: 100px;
          display: flex;
          span {
            margin-right: 10px;

            // border: 1px solid #000;
            background-color: rgb(235, 235, 235);
          }
        }
      }
    }
  }

  background: @background;
  .tltlieto {
    width: 100%;
    background: repeating-linear-gradient(to bottom, #ffffff, #eeeeee);
  }
  .tltles {
    margin-right: 10px;

    margin-left: 10px;
    margin-bottom: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
  }
  .eavluate {
    .monts();
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
  }
}
.daohan {
  position: absolute;
  height: 50px;
  width: 100%;
  /* border: 1px solid #000; */
  z-index: 3;
}
.mgsa {
  height: 500px;
}
.van-sticky {
  position: absolute;

  z-index: 10;
}
.lubo {
  height: 375px;
  /* border: 1px solid #000; */
}
</style>